<template>
  <div class="checkCom">
    <div class="checkCom_left">
      <div class="title">检验项目</div>
      <ul>
        <el-scrollbar height="400px">
          <li
            class="list"
            :class="{ active: checkStyle === index }"
            v-for="(item, index) in list"
            :key="index"
            @click="onCheck(item, index)"
          >
            <div class="number">{{ index + 1 }}</div>
            <div class="name">{{ item.title }}</div>
            <div class="time">{{ item.time }}</div>
          </li>
        </el-scrollbar>
      </ul>
    </div>
    <div class="checkCom_right">
      <div class="box">
        <el-scrollbar style="height: 400px">
          <div class="title">报告时间</div>
          <div class="content">2024-11-11 16:00:12</div>
          <!-- B超所见 -->
          <div class="title">B超所见</div>
          <div class="content">
            胎儿长到2.15厘米，胎儿头大于胎体，各部表现更清晰，头颅开始钙化、胎盘开始发育。B超可见胎囊几乎占满宫腔，胎儿轮廓更清晰，胎盘开始出现。
             
          </div>
          <!-- B超结论 -->
          <div class="title">B超结论</div>
          <div class="content">
            胎儿长到2.15厘米，胎儿头大于胎体，各部表现更清晰，头颅开始钙化、胎盘开始发育。B超可见胎囊几乎占满宫腔，胎儿轮廓更清晰，胎盘开始出现。
          </div>
        </el-scrollbar>
      </div>
    <div class="dicom">
        <img src="@/assets/b_chao.png" alt="">
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import Table from "@/components/Table/table.vue";
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  tableData: {
    type: Array,
    default: [],
  },
  columnList: {
    type: Array,
    default: [],
  },
});

const checkStyle = ref(1);
const onCheck = (item, index) => {
  checkStyle.value = index;
};
</script>
<style scoped lang="scss">
.checkCom {
  display: flex;
  .checkCom_left {
    width: 24%;
    padding: 0 16px;
    margin-right: 24px;
    .title {
      border-radius: 6px 6px 0px 0px;
      background: rgba(255, 255, 255, 0.1);
      color: var(--Gray-White, #fff);
      font-family: "Microsoft YaHei";
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 50px; /* 137.5% */
      height: 50px;
      text-align: center;
    }
    ul {
      .list {
        display: flex;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        color: var(--Gray-Gray5, #C5C5C5);
        .number {
          width: 10%;
          text-align: center;
        }
        .time {
          width: 40%;
          text-align: center;
        }
      }

      .list:hover {
        // background: rgba(255, 255, 255, 0.1);
      }

      .active {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;


      }
    }
  }
  .checkCom_right {
    width: 85%;
    display: flex;
    .box {
      width: 24%;
      .title {
        color: var(--Gray-Gray8, #777);
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }
      .content {
        color: var(--Gray-Gray4-, #dcdcdc);
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }
    }
    .dicom{
        flex: 1;
        margin-left: 20px;
    
    }
    .table {
    }
  }
}
</style>
